<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单的菜单动画效果</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: rgba(158, 201, 241, 0.21);
            color: #333;
        }
        .main{
            position: absolute;
            left: 0;
            right: 0;
            width: 100%;
            height: 40%;
            top: 10%;
            text-align: center;

        }
        .text{
            position: relative;
            display: inline-block;
            padding: 18px 30px;
            color: #000;
            margin: 100px;
        }
        .btn{
            width: 120px;
            padding: 10px 20px;
            margin: 0 auto;
            border: 1px solid #333;
            border-radius: 5px;
            transition: all 1s ease;
        }
        .btn:hover{
            box-shadow: 0 0 10px #505050;
            cursor: pointer;
        }
        .text:after{
            position: absolute;
            content: '';
            width: 0;
            height: 3px;
            display: block;
            left: 50%;
            bottom: 0;
            background: linear-gradient(to right,#00ffe1,#0041ff); ;
            opacity: 0.5;
            transition: all 1s ease;
        }
        .text.active:after{
            width: 100%;
            left: 0;
            opacity: 1;
            transition: all 1s ease;
        }
        .text.active{
            color: #0041ff;
            transition: all 1s ease;
        }
        .menu{
            width: 100%;
            margin: 20px;
            border-top: 1px solid #0041ff;
        }
        .menu ul{
            margin: 0 auto;
            padding: 0;
            display: inline-block;
        }
        .menu ul:after{
            content: '';
            display: block;
            overflow: hidden;
            clear: both;
            zoom: 1;
        }
        .menu ul li{
            float: left;
            list-style: none;
            margin: 4px;
        }
        .menu ul li a{
            text-decoration: none;
            padding: 8px 16px;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="text">菜单动画</div>
    <div class="btn" id="btn">切换样式</div>
    <div class="menu">
        <ul>
            <li><a href="task/transform-2d.html">transform-2d变形</a></li>
            <li><a href="task/slider.html">slider</a></li>
            <li><a href="task/animation.html">AE动画</a></li>
            <li><a href="jsDemo/index.html">js练习</a></li>
        </ul>
    </div>
</div>

</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
   $('#btn').click(function(){
       $('.text').toggleClass("active");
   })

</script>
